<template>
    <div>
        <!-- 顶部搜索 -->
        <div class="source-search">
            <div
                @click="countrysShow =! countrysShow,bgShow=!bgShow,moreShow = false;
                sizeShow = false;
                priceShow =false
                areaShow = false"
            >
                <span>{{country}}</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <div>
                <span class="fa fa-search"></span>
                <input type="text" placeholder="请输入国家地区" />
            </div>
            <img src="../../assets/img/tixing.png" alt />
        </div>
        <!-- 四大筛选栏 -->
        <div class="source-area">
            <div class="source-area-left">
                <div
                    @click="conditionNowColor = index,showList(index)"
                    v-for="(item,index) in condition"
                    :key="index"
                    :class="[conditionNowColor == index?'conditionColor':'']"
                >
                    <span>{{item}}</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </div>
            <img src="../../assets/img/paixu.png" alt />
        </div>
        <!-- 地区列表 -->
        <div class="scroll-range" style="height:76vh">
            <sourceList></sourceList>
        </div>
        <!-- 顶部国家选择 -->
        <transition name="fade" mode="out-in">
            <div class="country-choose" v-show="countrysShow">
                <transition name="down">
                    <div v-if="countrysShow">
                        <p
                            @click="countryChoose(item)"
                            v-for="(item,index) in countrys"
                            :key="index"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 更多 -->
        <transition name="fade" mode="out-in">
            <div class="source-more" v-show="moreShow">
                <transition name="down2">
                    <div class="source-more-list" v-if="moreShow">
                        <div
                            v-for="(item,index) in moreNum"
                            :key="index"
                            class="source-more-list-detail"
                        >
                            <p>{{item.name}}</p>
                            <span
                                @click="setColor(idx,v.id,index)"
                                :class="v.now?'moreColor':''"
                                v-for="(v,idx) in item.nameList"
                                :key="idx"
                            >{{v.label}}</span>
                        </div>
                        <div class="source-more-btn">
                            <div @click="setReset">重置</div>
                            <div @click="submitComfirm">确定</div>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 户型 -->
        <transition name="fade" mode="out-in">
            <div class="source-size" v-show="sizeShow">
                <transition name="down2">
                    <div class="source-size-list" v-if="sizeShow">
                        <p
                            @click="getSize(index,item)"
                            :class="{fourColor:index == sizeColor}"
                            v-for="(item,index) in sizeList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 价格 -->
        <transition name="fade" mode="out-in">
            <div class="source-price source-size" v-show="priceShow">
                <transition name="down2">
                    <div v-if="priceShow" class="source-size-list">
                        <p
                            @click="getPrice(index,item)"
                            :class="{fourColor:index == priceColor}"
                            v-for="(item,index) in priceList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 地区 -->
        <transition name="fade" mode="out-in">
            <div class="source-areas" v-show="areaShow">
                <transition name="down2">
                    <div class="source-areas-list" v-if="areaShow">
                        <div class="source-areas-list-left">
                            <p
                                @click="setCountrys(index)"
                                :class="{fourColor:index == areaColor}"
                                v-for="(item,index) in areaList"
                                :key="index"
                            >{{item.countrys}}</p>
                        </div>
                        <div class="source-areas-list-right">
                            <p
                                @click="getCitys(index,item.name)"
                                :class="{fourColor:index == citysColor}"
                                v-for="(item,index) in areaCitys"
                                :key="index"
                            >{{item.name}}</p>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 黑色背景 -->
        <transition name="fade" mode="out-in">
            <div class="bg-black" v-if="bgShow"></div>
        </transition>
    </div>
</template>
<script>
import { Indicator } from "mint-ui";
import sourceList from "../../components/sourceList";
export default {
    data() {
        return {
            //背景版
            bgShow: false,
            //顶部国家选择
            countrysShow: false,
            country: "美国",
            countrys: [
                "美国1",
                "美国2",
                "美国3",
            ],
            //更多
            moreShow: false,
            moreNum: [
                {
                    name: "物业类型",
                    nameList: [
                        { id: 1, label: "不限" },
                        { id: 2, label: "别墅" },
                        { id: 3, label: "商业地产" },
                        { id: 4, label: "写字楼" },
                        { id: 5, label: "公寓" },
                        { id: 6, label: "住宅" }
                    ]
                },
                {
                    name: "物业类型",
                    nameList: [
                        { id: 1, label: "不限" },
                        { id: 2, label: "别墅" },
                        { id: 3, label: "商业地产" },
                        { id: 4, label: "写字楼" },
                        { id: 5, label: "公寓" },
                        { id: 6, label: "住宅" }
                    ]
                }
            ],
            moreId: [],
            //户型
            sizeShow: false,
            sizeColor: 0,
            sizeList: [
                "不限1",
                "一居室2",
                "一居室3",
                "一居室4",
                "一居室5",
                "一居室6",
                "一居室7",
                "一居室8"
            ],
            //价格
            priceShow: false,
            priceColor: 0,
            priceList: [
                "全部",
                "50万以下",
                "50-100万",
                "100-200万",
                "200-300万",
                "300-500万",
                "700-1000万",
                "1000万以上"
            ],
            //地区
            areaShow: false,
            areaColor: 0,
            areaList: [
                {
                    countrys: "全国",
                    cityList: [
                        {
                            id: "1",
                            name: "不限"
                        }
                    ]
                },
                {
                    countrys: "纽约",
                    cityList: [
                        {
                            id: "1",
                            name: "纽约1"
                        },
                        {
                            id: "2",
                            name: "纽约2"
                        },
                        {
                            id: "3",
                            name: "纽约3"
                        }
                    ]
                }
            ],
            citysColor: 0,
            areaCitys: [],
            //四大条件
            conditionNowColor: "-1",
            condition: ["地区", "价格", "户型", "更多"]
        };
    },
    components: {
        sourceList
    },
    created() {
        //默认地区选项
        this.setCountrys(0),
            //模拟数据加载
            Indicator.open("加载中...");
        setTimeout(function() {
            Indicator.close();
        }, 1000);
    },
    mounted() {
        for (var i = 0; i < this.moreNum.length; i++) {
            this.moreNum[i].nameList.forEach((item, index) => {
                this.$set(item, "now", false);
            });
        }
    },
    watch: {},
    methods: {
        //顶部国家选择
        countryChoose(item) {
            this.country = item;
            (this.countrysShow = !this.countrysShow),
                (this.bgShow = !this.bgShow);
        },
        //四大筛选显示与隐藏样式
        showList(index) {
            //console.log(index);
            if (index == "3") {
                this.moreShow = !this.moreShow;
                this.sizeShow = false;
                this.priceShow = false;
                this.areaShow = false;
            }
            if (index == "2") {
                this.sizeShow = !this.sizeShow;
                this.moreShow = false;
                this.priceShow = false;
                this.areaShow = false;
            }
            if (index == "1") {
                this.priceShow = !this.priceShow;
                this.moreShow = false;
                this.sizeShow = false;
                this.areaShow = false;
            }
            if (index == "0") {
                this.areaShow = !this.areaShow;
                this.moreShow = false;
                this.sizeShow = false;
                this.priceShow = false;
            }
        },
        //更多
        setColor(idx, id, index) {
            //console.log(idx, 888);
            //console.log(this.moreNum[index].nameList[idx]);
            var now = this.moreNum[index].nameList[idx].now;
            this.moreNum[index].nameList[idx].now = !now;
        },
        submitComfirm() {
            var moreId = [];
            for (var i = 0; i < this.moreNum.length; i++) {
                for (var j = 0; j < this.moreNum[i].nameList.length; j++) {
                    if (this.moreNum[i].nameList[j].now) {
                        moreId.push(this.moreNum[i].nameList[j].id);
                    }
                }
            }
            this.moreId = moreId;
            this.moreShow = false;
            console.log(moreId);
        },
        setReset() {
            for (var i = 0; i < this.moreNum.length; i++) {
                this.moreNum[i].nameList.forEach((item, index) => {
                    this.$set(item, "now", false);
                });
                this.moreId = [];
                //console.log(this.moreId)
            }
        },
        //户型
        getSize(index, size) {
            this.sizeColor = index;
            this.condition[2] = size;
            this.sizeShow = false;
        },
        //总价
        getPrice(index, price) {
            this.priceColor = index;
            this.condition[1] = price;
            this.priceShow = false;
        },
        //地区
        setCountrys(index) {
            console.log(index);
            this.areaColor = index;
            this.citysColor = 0;
            this.areaCitys = this.areaList[index].cityList;
            console.log(this.areaCitys);
        },
        getCitys(index, name) {
            this.citysColor = index;
            this.areaShow = false;
            this.condition[0] = name;
        }
    }
};
</script>
<style lang="less" scoped>
//背景颜色
.bg-black {
    position: fixed;
    left: 0;
    top: 7vh;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
}
//四大筛选样式变换
.conditionColor {
    color: @blueColor5;
}
.source-search {
    z-index: 333;
    padding: 10px 15px;
    height: 8vh;
    .flexBetweenCenter();
    div:nth-child(1) {
        font-size: 14px;
        color: @blackColor8;
        font-weight: bold;
    }
    div:nth-child(2) {
        .flexStartCenter();
        width: 70%;
        background-color: @bgcolor3;
        color: @blackColor5;
        font-size: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        input {
            font-size: 10px;
            margin-left: 10px;
            background-color: @bgcolor3;
            border: none;
            outline: none;
            padding: 0;
            margin: 0;
        }
    }
    img:nth-child(3) {
        width: 20px;
        height: 18px;
    }
}
.source-area {
    padding: 0 15px;
    .flexBetweenCenter();
    height: 5vh;
    .source-area-left {
        width: 80%;
        .flexBetweenCenter();
        div {
            .flexStartCenter();
            font-size: 15px;
        }
    }
    img:nth-child(2) {
        width: 12px;
        margin-right: 10px;
    }
}

// 顶部国家选择样式
.country-choose {
    z-index: 5;
    position: fixed;
    left: 0;
    top: 7vh;
    width: 100%;
    height: 30vh;
    background-color: @white;
    padding: 15px 15px;
    overflow: hidden;
    div {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        p {
            font-size: 14px;
            color: @blackColor8;
            margin-bottom: 15px;
            font-weight: bold;
        }
    }
}
//更多
.moreColor {
    background-color: @blueColor5;
    border: 1px solid @blueColor5 !important;
    color: @white !important;
}
.source-more {
    z-index: 3;
    position: absolute;
    left: 0;
    top: 13vh;
    width: 100%;
    height: 87vh;
    background-color: @white;
    overflow: hidden;
    .source-more-list {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        //border-top: 1px solid @blackColor3;
        .source-more-list-detail {
            padding: 10px 15px 10px;
            border-bottom: 1px solid @blackColor3;
            margin-bottom: 10px;
            p:nth-child(1) {
                color: @blackColor8;
                font-size: 16px;
                margin-bottom: 15px;
            }
            span {
                display: inline-block;
                color: @blackColor8;
                font-size: 14px;
                border: 1px solid @blackColor3;
                border-radius: 20px;
                padding: 4px 20px;
                margin: 0 20px 10px 0;
            }
        }
    }
}
.source-more-btn {
    height: 58px;
    width: 100%;
    padding: 4px 15px;
    border-top: 1px solid @blackColor3;
    .flexBetweenCenter();
    div {
        margin-top: 10px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        border-radius: 4px;
    }
    div:nth-child(1) {
        width: 35%;
        height: 40px;
        border: 1px solid @blackColor3;
    }
    div:nth-child(2) {
        width: 62%;
        height: 40px;
        color: @white;
        background-color: @blueColor5;
    }
}
//选择颜色
.fourColor {
    color: @blueColor5 !important;
}
//户型
.source-size {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 13vh;
    width: 100%;
    height: 87vh;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    div {
        width: 100%;
        height: 40vh;
        background-color: @white;
        overflow-y: scroll;
        //border-top: 1px solid @blackColor3;
        .source-size-list-detail {
            font-size: 14px;
            text-align: center;
            padding: 2.5vh 0;
        }
    }
}
//价格
.source-price {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 13vh;
    width: 100%;
    height: 87vh;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    div {
        //border-top: 1px solid @blackColor3;
        width: 100%;
        height: 40vh;
        background-color: @white;
        overflow-y: scroll;
    }
}
//地区
.source-areas {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 13vh;
    width: 100%;
    height: 87vh;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    > div {
        //border-top: 1px solid @blackColor3;
        width: 100%;
        height: 40vh;
        background-color: @white;
        overflow-y: scroll;
        .flexBetween();
        div {
            width: 50%;
            padding: 10px 15px;
            height: 100%;
            overflow-y: scroll;
        }
        p {
            font-size: 14px;
            color: @blackColor8;
            padding: 1.5vh 0;
        }
        .source-areas-list-right {
            background-color: @blackColor3;
        }
    }
}
</style>
